<template>
  <div class="goods-warp df">
    <div class="goodsnavs fn">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          @click="handleClick"
          v-for="item in navsList"
          :key="item"
          :title="item"
        />
      </van-sidebar>
    </div>
    <div class="goodslist f1">
      <!-- 列表 -->
      <div class="goodsItem">
        <!-- 种类 -->
        <div
          class="goodsCate"
          v-for="goodsItem in goodsList"
          :key="goodsItem.name"
        >
          <h3 class="goodsCateItem">{{ goodsItem.name }}</h3>
          <!-- 单个商品 -->
          <div class="goods">
            <van-card
              class="card"
              v-for="item in goodsItem.foods"
              :key="item.id"
              num="2"
              :price="item.price"
              :desc="item.goodsDesc"
              :title="item.name"
              :thumb="item.imgUrl"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      activeKey: 0,
      heightList: [],
      loading: false,
    };
  },
  computed: {
    ...mapState("shop", ["goodsList"]),
    ...mapGetters("shop", ["navsList"]),
  },
  methods: {
    ...mapActions("shop", ["A_getGoodsLIst"]),
    //点击菜单
    handleClick(index) {
      console.log(index);
      this.activeKey = index;
      //获取节点
      const goodsNodes = document.querySelectorAll(".goodsCate");
      //右侧滚动
      this.bs1.scrollToElement(goodsNodes[this.activeKey], 600);

      //设置loading为true代表左侧点击
      this.loading = true;
    },
    renderScroll() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.bs = new BScroll(".goodsnavs", {
            click: true,
          });
        });
        this.bs1 = new BScroll(".goodslist", {
          click: true,
          probeType: 3,
        });

        //获取节点
        const goodsNodes = document.querySelectorAll(".goodsCate");
        //获取所有种类盒子的高度 转进数组
        goodsNodes.forEach((el) => {
          this.heightList.push(el.clientHeight);
        });
        //监听bs1的滚动
        this.bs1.on("scroll", ({ y }) => {
          // console.log(this.loading);
          if (this.loading) return;
          let Y = Math.abs(y);
          // console.log(Y);
          this.heightList.reduce((total, cur, index) => {
            if (Y > total && Y < total + cur) {
              this.activeKey = index;
            }
            return total + cur;
          }, 0);
        });
        //bs1滚动结束把loading设置为false
        this.bs1.on("scrollEnd", () => {
          this.loading = false;
        });
      }, 200);
    },
  },
  async created() {
    await this.$store.dispatch("shop/A_getGoodsLIst");
    //滚动
    this.renderScroll();
  },
};
</script>

<style lang="scss" scoped>
.goods-warp {
  height: 100%;
}
.goodsCateItem {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  padding-left: 5px;
  border-left: 6px solid #ddd;
}
.card {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>